<template>
  <view class="container">
    <view class="header">
      <view class="header-title">训练计划</view>
      <view class="header-subtitle">离散周期</view>
    </view>

    <view class="settings-card">
      <view class="setting-item" @click="edit(1)">
        <view class="setting-content">
          <view class="setting-label">组数</view>
          <view class="setting-value">{{ value || '请选择' }}</view>
        </view>
        <view class="setting-arrow"></view>
      </view>

      <view class="setting-item" @click="edit(2)">
        <view class="setting-content">
          <view class="setting-label">每组时间</view>
          <view class="setting-value">{{ value1 || '请选择' }}</view>
        </view>
        <view class="setting-arrow"></view>
      </view>
    </view>

    <u-picker
      :show="show"
      ref="uPicker"
      :columns="columns"
      @confirm="confirm"
      @change="changeHandler"
    ></u-picker>

    <u-picker
      :show="show1"
      ref="uPicker"
      :columns="columns1"
      @confirm="confirm1"
      @change="changeHandler1"
    ></u-picker>
  </view>
</template>


<script>
import {addPlanIns} from '../../api/fit'
export default {
  data() {
    return {
      show: false,
      show1: false,
      value: "",
      value1: "",
      columns1: [
        Array.from({length: 60}, (_, i) => String(i + 1)),
        ["組"]
      ],
      columns: [
        Array.from({length: 60}, (_, i) => String(i + 1)),
        ["次", "秒", "分"]
      ],
    };
  },

  methods: {
    edit(type) {
      if (type == 1) {
        this.show1 = true;
      } else {
        this.show = true;
      }
    },
    confirm(e) {
      this.value1 = e.value.join('');
      this.show = false;
    },
    confirm1(e) {
      this.value = e.value.join('');
      this.show1 = false;
    },
    changeHandler() {},
    changeHandler1() {},
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 30rpx;
}

.header {
  background: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  transform: translateZ(0);

  &-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #000;
  }

  &-subtitle {
    font-size: 28rpx;
    color: #666;
    padding: 8rpx 20rpx;
    background: #f5f5f5;
    border-radius: 30rpx;
  }
}

.settings-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  transform: translateZ(0);
}

.setting-item {
  position: relative;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
  border-radius: 16rpx;
  
  &:active {
    background: #EFEFEF;
  }

  &:not(:last-child) {
    border-bottom: 1rpx solid #f5f5f5;
  }
}

.setting-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.setting-label {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.setting-value {
  font-size: 30rpx;
  color: #666;
  margin-right: 20rpx;
}

.setting-arrow {
  width: 12rpx;
  height: 12rpx;
  border-top: 3rpx solid #999;
  border-right: 3rpx solid #999;
  transform: rotate(45deg);
}

// 添加3D悬浮效果
.header,
.settings-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: translateY(-2rpx) translateZ(0);
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
  }
}

// 添加点击波纹效果
.setting-item {
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    transform: scale(0) translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
  }

  &:active::after {
    transform: scale(2.5) translate(-50%, -50%);
    opacity: 1;
  }
}
</style>
